<nz-layout class="right-layout">
  <nz-content>
    <div class="inner-content">
      <div nz-row>
        <div nz-col nzSpan="24" style="height: 500px">
          <div id="uChart" style="height: 500px"></div>
        </div>
      </div>
      <div nz-row>
        <div id="buttondiv">
          <button type="button" (click)="viewDataTable()">View Data</button>
        </div>
      </div>
      <div nz-row>
        <div nz-col nzSpan="23">
          <nz-table
            *ngIf="tableDataSourceCollection?.arr?.length > 0"
            [nzData]="tableDataSourceCollection?.arr"
            [nzFrontPagination]="false"
            [nzScroll]="{ x: '' + xScroll + 'vh' }"
          >
            <thead>
              <ng-container *ngFor="let data of tableDataSourceCollection?.arr">
                <tr *ngIf="data.attribute == 'thIndex'">
                  <th [nzLeft]="true" style="width: 130px">No</th>
                  <th style="white-space: nowrap" *ngFor="let item of data?.result"> {{ item }}</th>
                </tr>
              </ng-container>
            </thead>
            <tbody>
              <ng-container *ngFor="let data of tableDataSourceCollection?.arr">
                <tr *ngIf="data.attribute != 'thIndex'">
                  <td style="white-space: nowrap" [nzLeft]="true">{{ data.attribute }}</td>
                  <td style="white-space: nowrap" *ngFor="let item of data?.result"> {{ item }}</td>
                </tr>
              </ng-container>
            </tbody>
          </nz-table>
        </div>
      </div>
    </div>
  </nz-content>
</nz-layout>
